
<link type="text/css" href="css/phone.css" rel="stylesheet">
<link type="text/css" href="module/modulestyle.css" rel="stylesheet">

<div class="container-fluid" style="margin: 20px">
    <div class="skyblue-br-row row">
        <div class="draggable-div col-xs-4 skyblue-br">
            <!--布局组件-->
            <ul class="list-group">
                <li class="list-item draggable-item">
                    <div class="drag-card">

                        <div id="card" class="banner-box">
                            <div class="bd">
                                <ul>
                                    <li style="background:#F3E5D8;">
                                        <div class="m-width">
                                            <a href="javascript:void(0);"><img src="" /></a>
                                        </div>
                                    </li>
                                    <li style="background:#B01415">
                                        <div class="m-width">
                                            <a href="javascript:void(0);"><img src="" /></a>
                                        </div>
                                    </li>
                                    <li style="background:#C49803;">
                                        <div class="m-width">
                                            <a href="javascript:void(0);"><img src="" /></a>
                                        </div>
                                    </li>
                                    <li style="background:#FDFDF5">
                                        <div class="m-width">
                                            <a href="javascript:void(0);"><img src="" /></a>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                            <div class="banner-btn">
                                <div class="hd"><ul></ul></div>
                            </div>
                        </div>

                    </div>
                </li>
                <li class="list-item draggable-item">

                    <div class="drag-card">
                        <div id="card2" class="menu-list">
                            <div id="menuList" class="row">
                                <div class="col-xs-4">
                                    <div style="text-align:center;">
                                        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                                        <p style="margin-top: 10px">设置文字</p>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div style="text-align:center;">
                                        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                                        <p style="margin-top: 10px">设置文字</p>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div style="text-align:center;">
                                        <img class="menu-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                                        <p style="margin-top: 10px">设置文字</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button onclick="ShowCreateModal(2)" type="button" class="btn btn-info"
                            style="margin-top: 20px;margin-left: 150px">配置列表</button>

                </li>
                <li class="list-item draggable-item">
                    <div class="drag-card">

                        <div id="card3" class="menu-list">
                            <div id="shopList" class="row" style="margin: 10px">
                                <div class="col-xs-6">
                                    <div >
                                        <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                                        <p style="margin-top: 10px">商品名称</p>
                                        <p style="margin-top: 5px;color: #B01415">商品价格</p>
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div >
                                        <img class="shop-item-image" src="https://images.pexels.com/photos/3283568/pexels-photo-3283568.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                                        <p style="margin-top: 10px">商品名称</p>
                                        <p style="margin-top: 5px;color: #B01415">商品价格</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <button onclick="ShowCreateModal(3)" type="button" class="btn btn-info"
                            style="margin-top: 20px;margin-left: 150px">配置列表</button>
                </li>
                <li class="list-item draggable-item">
                    <div class="drag-card">



                    </div>
                </li>
            </ul>
        </div>
        <div class="col-xs-6 skyblue-br" >
            <p style="text-align: center;color: #5d9c0a;margin-top: 20px">手机界面(16:9)</p>
            <div class="content-div skyblue-br">
                <!--开始显示新布局-->
                <div class="content-drag skyblue-br">

                </div>
            </div>
        </div>
        <div class="col-xs-2 skyblue-br">
            <button type="button" onclick="showHTML()" class="btn btn-success" style="margin: 20px">生成代码</button>
            <div id="htmlTextDiv">
            </div>

            <textarea id="htmlText" style="width: 100%;height: 500px;"></textarea>

        </div>
    </div>
</div>


<div class="modal fade" id="setListItem" role="dialog" aria-labelledby="setListItemLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createFileTitle">这个是配置数据的弹窗</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="fileName" class="col-form-label">输入每行有几个</label>
                        <input type="text" autofocus class="form-control" id="fileName">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" data-target="#setListItem"  class="btn btn-primary" id="createFileSureBut">确定</button>
            </div>
        </div>
    </div>
</div>

<!--组件js-->
<script src="module/banner/jquery.SuperSlide.2.1.1.js"></script>
<script src="module/module.js"></script>
<script src="js/phone.js"></script>